<template>
  <div class="questionSearchdiv">
    <!-- 学科筛选模块 -->

    <!-- 第一行 -->
    <el-row> 
      <!-- 学科 -->
      <el-col :span="6">
        <div class="inputDiv">
          <span class="fontStyle">学科</span>
          <el-select placeholder="请选择" class="inputStyle" v-model="subjectListValue">
            <el-option
              v-for="(item) in subjectsList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>

      <!-- 二级目录 -->
      <el-col :span="6">
        <div class="inputDiv">
          <span class="fontStyle">二级目录</span>
          <el-select placeholder="请选择" class="inputStyle" v-model="directorysValue">
            <el-option
              v-for="item in directorysList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>

      <!-- 标签 -->
      <el-col :span="6">
        <div class="inputDiv">
          <span class="fontStyle">标签</span>
          <el-select placeholder="请选择" class="inputStyle" v-model="tagsValue">
            <el-option
              v-for="item in tagsList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>

      <!-- 关键词 -->
      <el-col :span="6">
        <div class="inputDiv">
          <span class="fontStyle">关键词</span>
          <el-input class="inputStyle" placeholder="根据题干搜索" v-model.trim="keyWordsVal"></el-input>
        </div>
      </el-col>
    </el-row>

    <!-- 第二行 -->
    <el-row>
      <!-- 试题类型 -->
      <el-col :span="6">
        <div class="inputDiv">
          <span class="fontStyle">试题类型</span>
          <el-select placeholder="请选择" class="inputStyle" v-model="questionType">
            <el-option label="单选" value="1"></el-option>
            <el-option label="多选" value="2"></el-option>
            <el-option label="简答" value="0"></el-option>
          </el-select>
        </div>
      </el-col>

      <!-- 难度 -->
      <el-col :span="6">
        <div class="inputDiv">
          <span class="fontStyle">难度</span>
          <el-select placeholder="请选择" class="inputStyle" v-model="questionDifficult">
            <el-option label="简单" value="1"></el-option>
            <el-option label="一般" value="2"></el-option>
            <el-option label="困难" value="3"></el-option>
          </el-select>
        </div>
      </el-col>

      <!-- 方向 -->
      <el-col :span="6">
        <div class="inputDiv">
          <span class="fontStyle">方向</span>
          <el-select placeholder="请选择" class="inputStyle" v-model="directionVal">
            <el-option v-for="(item,i) in directionList" :key="i" :label="item" :value="item"></el-option>
          </el-select>
        </div>
      </el-col>

      <!-- 录入人 -->
      <el-col :span="6">
        <div class="inputDiv">
          <span class="fontStyle">录入人</span>
          <el-select placeholder="请选择" class="inputStyle" v-model="entryPeople">
            <el-option label="录入管理员" value="1"></el-option>
            <el-option label="超级管理员" value="2"></el-option>
          </el-select>
        </div>
      </el-col>
    </el-row>

    <!-- 第三行 -->
    <el-row>
      <!-- 题目备注 -->
      <el-col :span="6">
        <div class="inputDiv">
          <span class="fontStyle">题目备注</span>
          <el-input class="inputStyle" v-model.trim="note"></el-input>
        </div>
      </el-col>

      <!-- 企业简称 -->
      <el-col :span="6">
        <div class="inputDiv">
          <span class="fontStyle">企业简称</span>
          <el-input class="inputStyle" v-model.trim="enterprise"></el-input>
        </div>
      </el-col>

      <!-- 城市 -->
      <el-col :span="6">
        <div class="inputDiv">
          <span class="fontStyle">城市</span>
          <el-select placeholder="请选择" class="inputStyle cityInput" v-model="provincesVal">
            <el-option v-for="(item,i) in provincesList" :key="i" :label="item" :value="item"></el-option>
          </el-select>
          <el-select placeholder="请选择" class="inputStyle cityInput citySec" v-model="citysVal">
            <el-option v-for="(item,i) in citysList" :key="i" :label="item" :value="item"></el-option>
          </el-select>
        </div>
      </el-col>

      <!-- 清除 和 搜索 按钮 -->
      <el-col :span="6">
        <el-button type="primary" size="mini" class="fl searchBtn" @click="saearchFn">搜索</el-button>
        <el-button size="mini" class="fl" @click="clearFn">清除</el-button>
      </el-col>
    </el-row>

    <!-- /学科筛选模块 -->
  </div>
</template>

<script>

import { simple as simpleDirectorys } from '@/api/hmmm/directorys' // 获取二级目录列表
import { simple as simpleTags } from '@/api/hmmm/tags' // 获取简单标签列表
import { direction } from '@/api/hmmm/constants' // 获取方向
import { provinces, citys } from '@/api/hmmm/citys' // 城市

export default {
  name: 'questionSearch',

  props: {
    subjectsList: {
      type: Array,
      required: true
    }
  },

  data () {
    return {
      subjectListValue: '', // 学科
      directorysValue: '', // 二级目录
      directorysList: [], // 二级目录的数据列表
      tagsValue: '', // 标签
      tagsList: [], // 标签的数据列表
      keyWordsVal: '', // 关键词
      questionType: '', // 题目类型
      questionDifficult: '', // 题目难度
      directionVal: '', // 方向内容
      directionList: direction, // 方向列表
      entryPeople: '', // 录入人
      note: '', // 题目备注
      enterprise: '', // 企业简称
      provincesList: provinces(), // 所有城市
      citysList: [], // 城市下区域
      provincesVal: '', // 选中城市的内容
      citysVal: ''
    }
  },

  watch: {
    // 当学科输入框的内容发生变化时
    async subjectListValue () {
      this.directorysValue = ''
      this.tagsValue = ''
      this.directorysList = []
      this.tagsList = []

      // 当输入框内容发生改变时
      const { data: directorysData } = await simpleDirectorys({ subjectID: this.subjectListValue }) // 二级目录
      // console.log(directorysData);
      this.directorysList = directorysData

      const { data: tagsData } = await simpleTags({ subjectID: this.subjectListValue }) // 标签
      // console.log(tagsData);
      this.tagsList = tagsData
    },

    // 当城市输入框发生变化时
    provincesVal (newVal) {
      this.citysList = []
      this.citysList = citys(newVal)
    }
  },

  methods: {
    // 点击清除按钮
    clearFn () {
      this.subjectListValue ='',  // 学科
      this.directorysValue ='',  // 二级目录
      this.directorysList = [ ],  // 二级目录的数据列表
      this.questionType = '',  // 题目类型
      this.questionDifficult = '',  // 题目难度
      this.directionVal = '',  // 方向内容
      this.entryPeople = '',  // 录入人
      this.note = '', // 题目备注
      this.enterprise = '', // 企业简称
      this.citysList = [], // 城市下区域
      this.provincesVal = '', // 选中城市的内容
      this.citysVal = '' // 城市下列表
    },

    // 点击确认按钮
    saearchFn () {
      const data = {}
      if (!this.subjectListValue === '') data.subjectID = this.subjectListValue
      if (!this.questionDifficult === '') data.difficulty = this.questionDifficult
      if (!this.questionType === '') data.questionType = this.questionType
      if (!this.tagsValue === '') data.tags = this.tagsValue
      if (!this.provincesVal === '') data.province = this.provincesVal
      if (!this.citysVal === '') data.city = this.citysVal
      if (!this.keyWordsVal === '') data.keyword = this.keyWordsVal
      if (!this.note === '') data.remarks = this.note
      if (!this.enterprise === '') data.shortName = this.enterprise
      if (!this.directionVal === '') data.direction = this.directionVal
      if (!this.entryPeople === '') data.creatorID = this.entryPeople
      if (!this.directorysValue === '') data.catalogID = this.directorysValue

      // let data = {
      // subjectID: this.subjectListValue,
      // difficulty: this.questionDifficult,
      // questionType: this.questionType,
      // tags: this.tagsValue,
      // province: this.provincesVal,
      // city: this.citysVal,
      // keyword: this.keyWordsVal,
      // remarks: this.note,
      // shortName: this.enterprise,
      // direction: this.directionVal,
      // creatorID: this.entryPeople,
      // catalogID: this.directorysValue
      // }

      this.$emit('searchBtn', data)
    }
  }

}
</script>

<style scoped >
.fontStyle {
  text-align: right;
  width: 60px;
  float: right;
  line-height: 36px;
  margin-right: 12px;
  margin-left: 12px;
  font-weight: 700;
  font-size: 14px;
  color: #303133;
  white-space: nowrap;
}

.inputStyle {
  float: right;
  width: 80%;
}

::v-deep .el-input--medium .el-input__inner {
  height: 32px !important;
}
.fl {
  float: right;
  height: 32px;
}
.searchBtn {
  margin-left: 7px;
}

.inputDiv {
  justify-content: flex-end;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  margin-bottom: 18px;
}

.cityInput {
  width: 40%;
}
.citySec {
  margin-left: 5px;
}

::v-deep .el-input__inner {
  font-size: 12px;
}
</style>
